<template>
  <view class="myRecommendation-box" @click="routeJumpBtn(myRecommendation)">
    <view class="myRecommendation-top-box u-flex u-row-between">
      <view class="u-flex item-name-style">
        <view> 货源单号：{{ myRecommendation.sourceCode }} </view>
      </view>
      <view class="u-flex transTotalPrice-big-box">
        总价:￥<view class="transTotalPrice-box">
          {{ myRecommendation.freightTotalPrice }} </view
        ><span style="color: #e02020">元</span>
      </view>
    </view>
    <view class="content">
      <view class="myRecommendation-center-box">
        <view class="itemName-box-base">
          <view class="itemName-box">
            <view class="u-flex">
              货物名称：{{ myRecommendation.cargoName }}
            </view>
            <view class="boatName-box" v-if="myRecommendation.boatName"
              >{{ myRecommendation.boatName }}
            </view>
          </view>
          <!-- <image class="goods-icon" src="../../static/goodsdone.png" /> -->
          <!-- <image
            v-if="dataSourcesType == 'sourcegoodsList'"
            class="goods-icon"
            src="../../static/goodsdeleted.png"
          /> -->
          <template v-if="dataSourcesType == 0">
            <image
              v-if="pageList == 'waybill'"
              class="order-icon"
              :src="
                orderStatusList.filter(
                  (item) => item.type == myRecommendation.dispatchStatus
                )[0].icon
              "
            />
          </template>

          <template v-else>
            <image
              v-if="pageList == 'waybill'"
              class="order-icon"
              :src="
                orderNodeStatusList.filter(
                  (item) => item.type == myRecommendation.nodeStatus
                )[0].icon
              "
            />
          </template>
        </view>
        <view class="startingPoint-big-box">
          <view>
            <view class="province-box">
              <view>{{ myRecommendation.loadPlaceSplit.city }}</view>
            </view>
            <view class="city-box">
              <view>{{ myRecommendation.loadPlaceSplit.county }}</view>
            </view>
          </view>
          <image class="address-icon" :src="`${imgUrl}address-arrow.png`" />
          <view>
            <view class="province-box">
              <view>{{ myRecommendation.targetPlaceSplit.city }}</view>
            </view>
            <view class="city-box">
              <view>{{ myRecommendation.targetPlaceSplit.county }}</view>
            </view>
          </view>
        </view>
        <view class="weight-box">
          <!-- 货原单 -->
          <template v-if="pageList == 'sourcegoods'">
            <view class="weight-left">
              <view class="u-flex">
                <view class="weight-box-lable">联系人：</view>
                {{ myRecommendation.corpName ? myRecommendation.corpName : '' }}
              </view>

              <view
                class="u-flex"
                @click.stop="callPhone(myRecommendation.shipperPhone)"
              >
                <view class="weight-box-lable">联系电话：</view>
                <text style="color: #0091ff">{{
                  myRecommendation.shipperPhone
                }}</text>
              </view>
              <view class="u-flex">
                <view class="weight-box-lable"> 截止时间：</view>
                {{ myRecommendation.validEndTime }}
              </view>
            </view>
            <view class="weight-right">
              <view class="u-flex">
                <view class="weight-box-lable">单价：</view>
                <view class="weight-box-content">
                  {{ myRecommendation.freightUnitPrice }}元/吨
                </view>
              </view>
              <view class="u-flex">
                <view class="weight-box-lable">重量：</view>
                <view class="weight-box-content">
                  {{ myRecommendation.sourceUnitWeight }}吨/车
                </view>
              </view>
              <view class="u-flex" style="color: red">
                <view class="weight-box-lable">申请条件：</view>
                {{ myRecommendation.limitCarDischargeValue }}
              </view>
            </view>
          </template>

          <!-- 订单 -->
          <template v-else>
            <view class="u-flex">
              <view class="weight-box-lable">
                <image
                  class="driver-icon"
                  src="../../static/ordertransforming.png"
                />
              </view>
              <view class="weight-box-content">
                {{ myRecommendation.driverName }}
              </view>
            </view>
            <view class="u-flex">
              <view class="weight-box-lable">车牌：</view>
              <view class="weight-box-content">
                {{ myRecommendation.carNo }}
              </view>
            </view>
            <view class="u-flex">
              <view class="weight-box-lable">车辆信息：</view>
              <!-- {{ myRecommendation.userName }} -->
              <view class="tag" style="background: #32c5ff"
                >{{ myRecommendation.carLengthValue }}米
              </view>
              <view class="tag" style="background: #f7b500; margin: 0 5rpx">
                {{ myRecommendation.carTypeValue }}
              </view>
              <view class="tag" style="background: #0091ff"
                >{{ myRecommendation.carPlateColorValue }}
              </view>
            </view>
            <view
              class="u-flex"
              @click.stop="callPhone(myRecommendation.driverPhone)"
            >
              <view class="weight-box-lable"> 联系电话：</view>
              <text style="color: #0091ff">{{
                myRecommendation.driverPhone
              }}</text>
            </view>
            <view class="u-flex">
              <view class="weight-box-lable"> 信用评分：</view>
              {{ myRecommendation.evaluate }}
            </view>
            <view class="u-flex" v-if="myRecommendation.dispatchStatus == '1'">
              <view class="weight-box-lable">抢单时间：</view>
              {{ myRecommendation.createAt }}
            </view>
            <view class="u-flex" v-if="myRecommendation.dispatchStatus == '2'">
              <view class="weight-box-lable">发货时间：</view>
              {{ myRecommendation.receiveAt }}
            </view>
            <view
              class="u-flex"
              v-if="
                myRecommendation.dispatchStatus == '3' ||
                myRecommendation.dispatchStatus == '4'
              "
            >
              <view class="weight-box-lable">到货时间：</view>
              {{ myRecommendation.arriveAt }}
            </view>
          </template>
        </view>
      </view>
      <view class="myRecommendation-bottom-box">
        <view style="width: 100%; display: flex; align-items: center">
          <u-line-progress
            :show-percent="false"
            height="8"
            :showText="false"
            active-color="#3399FF"
            class="progress-bar"
            :percent="myRecommendation.percentage"
          >
          </u-line-progress>
          <view>
            已抢{{ myRecommendation.percentage }}%,还剩{{
              myRecommendation.sourceSurplusWeight
            }}吨
          </view>
        </view>
        <view class="myRecommendation-bottom-btns">
          <!-- <u-button
            :plain="true"
            :custom-style="btnCalss1"
            @click="deleteItem(myRecommendation)"
          >
            作废
          </u-button>
          <u-button
            :plain="true"
            :custom-style="btnCalss2"
            @click="editItem(myRecommendation)"
          >
            编辑
          </u-button> -->
          <u-button
            :plain="true"
            :custom-style="btnCalss1"
            @click="grabAnOrder(myRecommendation)"
          >
            抢单
          </u-button>
        </view>
      </view>
      <view class="myRecommendation-bottom-box" v-if="pageList == 'waybill'">
        <view style="width: 40%; display: flex"></view>
        <view class="myRecommendation-bottom-btns">
          <u-button
            v-if="myRecommendation.dispatchStatus == '1'"
            :plain="true"
            :custom-style="btnCalss2"
            @click="handleDispatchCancelSend(myRecommendation)"
          >
            取消派单
          </u-button>
          <u-button
            v-if="myRecommendation.dispatchStatus == '1'"
            :plain="true"
            :custom-style="btnCalss2"
            @click="handleDispatchSend(myRecommendation)"
          >
            确定派单
          </u-button>
          <u-button
            v-if="
              myRecommendation.dispatchStatus == '2' &&
              myRecommendation.nodeStatus == '7'
            "
            :plain="true"
            :custom-style="btnCalss2"
            @click="handleDispatchArrive(myRecommendation)"
          >
            到货确认
          </u-button>
          <u-button
            v-if="
              myRecommendation.dispatchStatus == '2' ||
              myRecommendation.dispatchStatus == '4'
            "
            :plain="true"
            :custom-style="btnCalss2"
            @click="handleDispatchTrack(myRecommendation)"
          >
            车辆轨迹
          </u-button>
          <u-button
            v-if="myRecommendation.dispatchStatus == '4'"
            :plain="true"
            :custom-style="btnCalss3"
            @click="handleDispatchEvaluate(myRecommendation)"
          >
            评价司机
          </u-button>
          <u-button
            :plain="true"
            :custom-style="btnCalss3"
            @click="routeJumpBtn(myRecommendation)"
          >
            查看详情
          </u-button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { imgUrl } from 'common/httpEnum'

export default {
  name: 'C_myRecommendation',
  props: {
    myRecommendation: {
      type: Object,
      default: () => {
        return {}
      },
    },
    grabbingTime: {
      type: Boolean,
      default: false,
    },
    dataSourcesType: {
      type: Number,
      default: undefined,
    },
    pageList: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      imgUrl,
      btnCalss1: {
        marginLeft: '20rpx', // 注意驼峰命名，并且
        width: '128rpx',
        height: '48rpx',
        lineHeight: '48rpx',
        fontSize: '32rpx',
        color: '#fff',
        background: 'linear-gradient(90deg, #69B3FD 0%, #387CF9 100%)',
        borderRadius: '24px',
      },
      btnCalss2: {
        marginLeft: '20rpx', // 注意驼峰命名，并且
        width: '128rpx',
        height: '49rpx',
        lineHeight: '49rpx',
        fontSize: '24rpx',
        background: '#fff',
        color: '#387cf9',
        boxSizing: 'border-box',
      },
      btnCalss3: {
        marginLeft: '20rpx', // 注意驼峰命名，并且
        width: '128rpx',
        height: '49rpx',
        lineHeight: '49rpx',
        fontSize: '24rpx',
        background: '#4F87FE',
        color: 'white',
        boxSizing: 'border-box',
      },
      orderStatusList: [
        { type: 1, icon: '../../static/ordertobeconfirmed.png' },
        { type: 2, icon: '../../static/ordertransforming.png' },
        { type: 3, icon: '../../static/ordertobepaid.png' },
        { type: 4, icon: '../../static/orderfinish.png' },
        { type: 5, icon: '../../static/ordercancel.png' },
      ],
      orderNodeStatusList: [
        { type: 1, icon: '../../static/ordertobeconfirmed.png' },
        { type: 2, icon: '../../static/ordertobeconfirmed-1.png' },
        { type: 3, icon: '../../static/ordercancel2.png' },
        { type: 4, icon: '../../static/ordertransforming-1.png' },
        { type: 5, icon: '../../static/ordercancel1.png' },
        { type: 6, icon: '../../static/ordertransforming-2.png' },
        { type: 7, icon: '../../static/ordertransforming-3.png' },
        { type: 8, icon: '../../static/orderpay1.png' },
        { type: 9, icon: '../../static/orderpay2.png' },
        { type: 10, icon: '../../static/orderfinish.png' },
        { type: 11, icon: '../../static/orderpay4.png' },
        { type: 12, icon: '../../static/ordercancel.png' },
      ],
    }
  },
  onShow(options) {
    console.log(imgUrl)
  },
  methods: {
    callPhone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
      })
    },
    grabAnOrder(val) {
      this.$emit('grabAnOrder', val.sourceId)
    },
    editItem(val) {
      this.$emit('editItem', val)
    },
    deleteItem(val) {
      this.$emit('deleteItem', val)
    },
    shortcutMenuFc(val) {
      this.$emit('shortcutMenuFc', val)
    },
    // 确认派单
    handleDispatchSend(val) {
      this.$emit('dispatchSend', val)
    },
    //取消派单
    handleDispatchCancelSend(val) {
      this.$emit('dispatchCancelSend', val)
    },
    // 到货确认
    handleDispatchArrive(val) {
      this.$emit('dispatchArrive', val)
    },
    // 评价司机
    handleDispatchEvaluate(val) {
      this.$emit('dispatchEvaluate', val)
    },
    // 车辆轨迹
    handleDispatchTrack(val) {
      this.$api.msg('此功能正在开发中')
      this.$emit('dispatchTrack', val)
    },
    // 运费结算
    handledispatchSettle(val) {
      this.$emit('dispatchSettle', val)
    },
    //路由跳转
    routeJumpBtn(val) {
      this.$emit('routeJumpBtn', val)
    },
    //字符串截取
    stringInterception(val) {
      if (val?.length > 22) {
        return val.substring(0, 22) + '...'
      } else {
        return val
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.myRecommendation-box {
  background: white;
  border-radius: 10rpx;

  .myRecommendation-top-box {
    width: 100%;
    font-size: 32rpx;
    color: #4b4b4b;

    .transTotalPrice-big-box {
      padding-right: 16rpx;
      white-space: nowrap;
      font-size: 24rpx;

      .transTotalPrice-box {
        white-space: nowrap;
        color: #e02020;
        font-size: 40rpx;
      }
    }
  }

  .content {
    padding: 0 16rpx;
  }

  .item-name-style {
    padding-left: 16rpx;
    font-size: 28rpx;
    font-weight: bold;
    width: 472rpx;
    height: 80rpx;
    background: #ebf2fe;
    border-radius: 0px 0px 41px 0px;
  }

  .f-24 {
    font-size: 24rpx;
  }

  .myRecommendation-center-box {
    padding-bottom: 16rpx;

    .startingPoint-big-box {
      // background: #ebf2fe;
      border-radius: 10rpx;
      margin: 20rpx 0;
      padding: 22rpx 34rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      border-bottom: 1px splid #f2f2f2;
      align-items: center;
    }

    .address-icon {
      width: 163rpx;
      height: 13rpx;
    }

    .address-icon-lay {
      margin-left: -70rpx;
      margin-top: -20rpx;
      transform: rotate(45deg);
      width: 30rpx;
      height: 1rpx;
      border: 1rpx solid #f2f2f2;
    }

    .province-box {
      font-size: 36rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
    }

    .city-box {
      font-size: 24rpx;
      font-weight: 500;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .weight-box {
      display: flex;
      flex-wrap: wrap;
      font-size: 26rpx;
      color: #000;
      margin-bottom: 11rpx;
      padding-top: 4rpx;
      border-top: 1px solid #f2f2f2;
      line-height: 33rpx;
      .weight-left {
        width: 60%;
      }
      .weight-right {
        width: 40%;
      }
      .u-flex {
        white-space: nowrap;
        margin-top: 11rpx;
        .weight-box-lable {
          text-align: justify;
          text-align-last: justify;
          width: 120rpx;
        }

        .weight-box-content {
          color: black;
        }
      }
    }

    .itemName-box-base {
      position: relative;

      .itemName-box {
        display: flex;
        flex-wrap: wrap;
        font-size: 28rpx;
        margin-top: 13rpx;
        padding-bottom: 12rpx;
        border-bottom: 1px solid #f2f2f2;
        .boatName-box {
          margin-left: 10rpx;
          border-radius: 17px;
          border: 2rpx solid #f97825;
          color: #fa6400;
          padding: 0 12rpx;
        }
      }

      .goods-icon {
        position: absolute;
        width: 115rpx;
        height: 115rpx;
        left: 550rpx;
        top: 10rpx;
      }

      .order-icon {
        position: absolute;
        width: 115rpx;
        height: 108rpx;
        left: 550rpx;
        top: -100rpx;
      }
    }

    .driver-icon {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .myRecommendation-bottom-box {
    position: relative;
    padding: 16rpx 0;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f2f2f2;

    .dot {
      position: absolute;
      width: 16rpx;
      height: 16rpx;
      background: #3399ff;
      border-radius: 50%;
      left: 10rpx;
      top: 32rpx;
    }
  }
  .myRecommendation-bottom-btns {
    display: flex;
    justify-items: flex-end;
  }
  .container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }

  .container .box {
    width: 12rpx;
    height: 12rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .container .box span {
    position: absolute;
    box-sizing: border-box;
    border-radius: 50%;
    animation: animate 1s linear infinite;
    animation-delay: calc(1s * var(--i));
  }

  .container .box:nth-child(2) span {
    border: none;
    background: #3399ff;
  }

  @keyframes animate {
    0% {
      width: 0;
      height: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      width: 36rpx;
      height: 36rpx;
      opacity: 0;
    }
  }

  .finding-tip {
    margin-left: 20rpx;
    height: 50rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #949699;
    line-height: 50rpx;
  }

  .progress-bar {
    width: 40%;
    height: 15rpx;
    margin: 10rpx 10rpx 0 0;
    display: flex;
  }

  .tag {
    width: 66rpx;
    height: 32rpx;
    line-height: 32rpx;
    border-radius: 10%;
    color: white;
    text-align: center;
  }
}
</style>
